<template>
  <div>
    <!-- 产品详情区 -->
    <div class="w">
      <div class="title-area">
        <span>产品详情</span>
      </div>
      <div class="content-area" style="padding-top: 15px;">
          <Row class="info-row">
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">产品名称：</div></Col>
            <Col :span="16"><div>{{ record.produceName }}</div></Col>
          </Row>
          <Row class="info-row">
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">版本号：</div></Col>
            <Col :span="16"><div>{{ record.release }}</div></Col>
          </Row>
          <Row class="info-row">
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">产品简介：</div></Col>
            <Col :span="16"><div>{{ record.remark }}</div></Col>
          </Row>
          <Row>
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">适用平台：</div></Col>
            <Col :span="16"><div>{{ record.platform }}</div></Col>
          </Row>
      </div>
    </div>

    <!-- 厂商信息区 -->
    <div class="w" style="margin-top: 5px;">
      <div class="title-area">
        <span>厂商信息</span>
      </div>
      <div class="content-area">
        <Row class="info-row" style="padding-top: 15px;">
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">厂商名称：</div></Col>
            <Col :span="16"><div>{{ record.firm ? record.firm.firmName : '' }}</div></Col>
        </Row>
        <Row class="info-row">
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">联系人：</div></Col>
            <Col :span="16"><div>{{ record.firm ? record.firm.linkMan : '' }}</div></Col>
        </Row>
        <Row>
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">联系电话：</div></Col>
            <Col :span="16"><div>{{ record.firm ? record.firm.linkPhone : '' }}</div></Col>
        </Row>
      </div>
    </div>

    <!-- 产品信息区 -->
    <div class="w" style="margin-top: 5px;">
      <div class="title-area">
        <span>产品信息</span>
      </div>
      <div class="content-area">
        <Row class="info-row" style="padding-top: 15px;">
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">产品介质：</div></Col>
            <Col :span="16"><div style="color: #F5A843;">{{ record.produceMediaList }}</div></Col>
        </Row>
        <Row>
            <Col :span="4" :offset="0"><div style="padding-right: 15px; text-align: right;">产品手册：</div></Col>
            <Col :span="16">
                <div v-for="doc in record.produceHandbookList" :key="doc" style="color: #F5A843;">{{ doc }}</div>
            </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data: function () {
    return {
      labelCol: {
        span: 8
      },
      wrapperCol: {
        span: 15
      },
      record: {}
    }
  },
  mounted: function () {
    this.record = this.$route.query.record;


    // this.record.medium = 'jincang-v3.2.1-x86-64_centOS7-see-202112.rpm';
    // this.record.documents = ['数据库安全版开发手册.doc', '数据库安全版管理手册.docx', '数据库安全版部署最佳实践.rar'];
    // this.record.description = `` +
    //     `中国联通设计价值观为“设计系统”的设计者以及基于“设计系统”进行产品设计的设计者，提供评价设计好坏的内在标准，并提供有效的设计实践所遵循的规则。同时，它启示并激发了设计原则和设计模式，为具体的设计问题提供向导和一般解决方案。` +
    //     `我们基于“理性”“一致”“高效”“生长”的设计价值观，运用模块化的解决方案，降低冗余的生产成本，让设计者更好的专注于用户体验。` +
    //     `瀚高为企业级客户精心打造的一款拥有完全国产自主知识产权、面向核心交易型业务处理的企业级关系型数据库，全面拓展了丰富的企业级功能，在业务处理性能、高可用性、安全性及易用性方面均有不同程度的增强。` +
    //     `秉承开放、合作、共赢的合作理念，通过提供销售、市场、技术等全方位的支持，助力合作伙伴成功构建基于瀚高产品的业务，实现业务创新，持续为客户和伙伴创造价值。`;


    console.log("this.record: ", this.record);
  },
  methods: {
    submit: function () {
      console.log("Submit...");
    },
    cancel: function () {
      this.$router.push('/productInfoMgr');
    }
  }
}
</script>

<style scoped>
  .w {
    /* height: 100%; */
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }

  /* 主体内容显示区 */
  .content-area {
    /* background-color: lightblue; */
    height: 100%;
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 15px;
  }
  /* 基本信息区域 */
  .info-row {
    margin-bottom: 20px !important;
  }
  /* 查询表单区 */
  .form-area {
    /* background-color: lightcyan; */
    margin-left: 50px;
    margin-right: 50px;
  }
  .formGrid {
    /* background-color: orange; */
    margin-top: 15px;
    height: 35px;
    line-height: 35px;
  }

  .uni-divider {
    margin: 0;
  }

  /* 按钮区 */
  .button-area {
    margin-top: 15px;
    /* background-color: lightcyan; */
  }
  .button-area svg {
    margin-top: 3px;
    margin-right: 5px;
  }

  /* 列表区 */
</style>

